<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ajax</title>
    <link rel="stylesheet" href="">
    <!--[if IE]><![endif]-->
</head>

<body>
    <ul class="test">
        <li1>item 1</li1>
        <li2>item 2</li2>
        <li3>item 3</li3>
    </ul>
    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ol>
    <script type="text/javascript">
    var $ = { /*传递参数对象，返回拼接之后的字符串*/ /*{‘name’:’jack,’age’:20}=>  name=jack&age=20&*/
        getParmeter: function(data) {
            var result = "";
            for (var key in data) {
                result = result + key + "=" + data[key] + "&";
            } /*将结果最后多余的&截取掉*/
            return result.slice(0, -1);
        },
        createXHR: function() {
            if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
            } else {
                return new ActiveXObject('MicroSoft.XMLHTTP');
            }
        },

        /*实现ajax请求*/
        ajax: function(obj) { /*1.判断有没有传递参数，同时参数是否是一个对象*/
            if (obj == null || typeof obj != "object") {
                return false;
            } /*2.获取请求类型,如果没有传递请求方式，那么默认为get*/
            var type = obj.type || 'get';
            /*3.获取请求的url  location.pathname:就是指当前请求发起的路径*/
            var url = obj.url || location.pathname;
            /*4.获取请求传递的参数*/
            var data = obj.data || {};
            /*4.1获取拼接之后的参数*/
            data = this.getParmeter(data);
            /*5.获取请求传递的回调函数*/
            var success = obj.success || function() {};
            /*6:开始发起异步请求*/
            /*6.1:创建异步对象*/
            //var xhr = new XMLHttpRequest(); /*6.2:设置请求行,判断请求类型，以此决定是否需要拼接参数到url*/
            var xhr = this.createXHR();

            if (type == 'get') {
                url = url + "?" + data; /*重置参数，为post请求简化处理*/
                data = null;
            }
            xhr.open(type, url);
            /*6.2:设置请求头:判断请求方式，如果是post则进行设置*/
            if (type == "post") {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            }
            /*6.3:设置请求体,post请求则需要传递参数*/
            xhr.send(data);
            /*7.处理响应*/
            xhr.onreadystatechange = function() {
                /*8.判断响应是否成功*/
                if (xhr.status == 200 && xhr.readyState == 4) { /*客户端可用的响应结果*/
                    var result = null;
                    /*9.获取响应头Content-Type ---类型是字符串*/
                    var grc = xhr.getResponseHeader("Content-Type");
                    /*10.根据Content-Type类型来判断如何进行解析*/
                    if (grc.indexOf("json") != -1) { /*转换为js对象*/
                        result = JSON.parse(xhr.responseText);
                    } else if (grc.indexOf("xml") != -1) {
                        result = xhr.responseXML;
                    } else {
                        result = xhr.responseText;
                    }
                    /*11.拿到数据，调用客户端传递过来的回调函数*/
                    success(result);
                }
            }
        }
    };
    $.ajax({
        url: "./city.json",
        data: {
            "name": "value"
        },
        success: function(res) {
            console.log("sucess", res);
        },
        error: function(res) {
            console.log(res);
        }
    });
    </script>
</body>

</html>